import React, { Component } from 'react'
import axios from '../../utils/request'
import '../../App.css'
import debounce from '../../utils/debounce'

export default class Service extends Component {
    componentDidMount() {
        //调用函数
        this.getList()
    }

    state = {
        list: [],
        flag: false,
        addFrom: {
            id: '',
            skinge: '',
            skprice: '',
            sktype: '',
            sum: '',
            title: '',
            name: '',
            sold: '',
            wifelist: '',
            boy: '',
        },
        upFlag: false,
        upFrom: {
            id: '',
            skinge: '',
            skprice: '',
            sktype: '',
            sum: '',
            title: '',
            name: '',
            sold: '',
            wifelist: '',
            boy: '',
        }
    }

    //渲染数据
    getList() {
        axios({
            url: '/getlist',
            method: 'post'
        }).then(res => {
            this.setState({
                list: res.data.data
            })
        })
    }

    //增
    add() {
        this.setState({
            flag: true,
            addFrom: {}
        })

    }
    append(addFrom) {
        this.setState({
            flag: false
        })

        axios({
            url: '/api/appEnd',
            method: 'put',
            data: {
                id: addFrom.id,
                skinge: addFrom.skinge,
                skprice: addFrom.skprice,
                sktype: addFrom.sktype,
                sum: addFrom.sum,
                title: addFrom.title,
                name: addFrom.name,
                sold: addFrom.sold,
                wifelist: addFrom.wifelist,
                boy: addFrom.boy
            }
        }).then((res) => {
            console.log(res);
            //调用函数
            this.getList()
        })
    }
    matter(value, key) {
        let { addFrom } = this.state
        addFrom[key] = value
        this.setState({
            addFrom
        })
    }

    //删
    Del(id) {
        axios({
            url: '/getdel',
            method: 'delete',
            data: {
                id: id
            }
        }).then(() => {
            //调用函数
            this.getList()
        })
    }

    //改
    update(item) {
        this.setState({
            upFlag: true,
            upFrom: { ...item }
        })
    }
    amend(upFrom) {
        this.setState({
            upFlag: false,
        })

        axios({
            url: '/api/amEnd',
            method: 'post',
            data: {
                skprice: upFrom.skprice,
                sktype: upFrom.sktype,
                sum: upFrom.sum,
                id: upFrom.id,
                skinge: upFrom.skinge,
                title: upFrom.title,
                name: upFrom.name,
                sold: upFrom.sold,
                wifelist: upFrom.wifelist,
                boy: upFrom.boy
            }
        }).then((res) => {
            //调用函数
            this.getList()
        })
    }
    matter1(value, key) {
        let { upFrom } = this.state
        upFrom[key] = value
        this.setState({
            upFrom
        })
    }

    //查
    check = (value) => {
        debounce(() => {
            axios({
                url: '/search',
                method: 'post',
                data: {
                    value: value
                }
            }).then(res => {
                this.setState({
                    list: res.data.data
                })
            })
        }, 1000)

    }

    //点击取消关闭蒙层
    cancel() {
        //点击关闭添加 或 修改 蒙层
        this.setState({
            flag: false,
            upFlag: false,
        })
    }


    render() {
        const { list, flag, upFlag, addFrom, upFrom } = this.state
        return (
            <div className="home">
                <header>
                    <div className="search1">
                        <p>
                            搜索&nbsp;
                            {/* 搜索 */}
                            <input type="text" onChange={(e) => this.check(e.target.value)} />
                        </p>
                    </div>
                    <div className="add">
                        <button onClick={() => this.add()}>新增</button>
                    </div>
                </header>
                <main>
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>名称</th>
                                <th>医院</th>
                                <th>价格</th>
                                <th>数量</th>
                                <th>姓名</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                list.length && list.map((item, index) => {
                                    return <tr key={index}>
                                        <td>{item.id}</td>
                                        <td>{item.wifelist}</td>
                                        <td>{item.boy}</td>
                                        <td>{item.skprice}</td>
                                        <td>{item.sum}</td>
                                        <td>{item.name}</td>
                                        <td>
                                            <span className="compile"></span>
                                            <span className="revise" onClick={() => this.update(item)}>修改</span>
                                            <span className="del" onClick={() => this.Del(item.id)}>删除</span>
                                        </td>
                                    </tr>
                                })
                            }
                        </tbody>
                    </table>
                </main >
                {/* 增加 */}
                {
                    flag ? <div className="mask">
                        <div className="addMask">

                            <div className="input"><span>名称:</span> <input type="text" value={addFrom.wifelist} onChange={(e) => this.matter(e.target.value, "wifelist")} /></div>
                            <div className="input"><span>名称1:</span> <input type="text" value={addFrom.skinge} onChange={(e) => this.matter(e.target.value, "skinge")} /></div>
                            <div className="input"><span>价格:</span> <input type="text" value={addFrom.skprice} onChange={(e) => this.matter(e.target.value, "skprice")} /></div>
                            <div className="input"><span>规格:</span> <input type="text" value={addFrom.sktype} onChange={(e) => this.matter(e.target.value, "sktype")} /></div>
                            <div className="input"><span>简介:</span> <input type="text" value={addFrom.sold} onChange={(e) => this.matter(e.target.value, "sold")} /></div>
                            <div className="input"><span>标题:</span> <input type="text" value={addFrom.title} onChange={(e) => this.matter(e.target.value, "title")} /></div>
                            <div className="input"><span>姓名:</span> <input type="text" value={addFrom.name} onChange={(e) => this.matter(e.target.value, "name")} /></div>
                            <div className="input"><span>数量:</span> <input type="text" value={addFrom.sum} onChange={(e) => this.matter(e.target.value, "sum")} /></div>
                            <div className="input"><span>医院:</span> <input type="text" value={addFrom.boy} onChange={(e) => this.matter(e.target.value, "boy")} /></div>
                            <div className="input"><span> ID:&emsp;</span> <input type="text" value={addFrom.id} onChange={(e) => this.matter(e.target.value, "id")} /></div>
                            {/* 新增 */}
                            <button className="append" onClick={() => this.append(addFrom)}>添加</button>
                            <button className="cancel" onClick={() => this.cancel()}>取消</button>
                        </div>
                    </div> : <></>
                }
                {/* 修改 */}
                {
                    upFlag ? <div className="mask">
                        <div className="addMask">

                            <div className="input"><span>名称:</span> <input type="text" value={upFrom.wifelist} onChange={(e) => this.matter1(e.target.value, "wifelist")} /></div>
                            <div className="input"><span>名称1:</span> <input type="text" value={upFrom.skinge} onChange={(e) => this.matter1(e.target.value, "skinge")} /></div>
                            <div className="input"><span>价格:</span> <input type="text" value={upFrom.skprice} onChange={(e) => this.matter1(e.target.value, "skprice")} /></div>
                            <div className="input"><span>简介:</span> <input type="text" value={upFrom.sold} onChange={(e) => this.matter1(e.target.value, "sold")} /></div>
                            <div className="input"><span>标题:</span> <input type="text" value={upFrom.title} onChange={(e) => this.matter1(e.target.value, "title")} /></div>
                            <div className="input"><span>姓名:</span> <input type="text" value={upFrom.name} onChange={(e) => this.matter1(e.target.value, "name")} /></div>
                            <div className="input"><span>规格:</span> <input type="text" value={upFrom.sktype} onChange={(e) => this.matter1(e.target.value, "sktype")} /></div>
                            <div className="input"><span>数量:</span> <input type="text" value={upFrom.sum} onChange={(e) => this.matter1(e.target.value, "sum")} /></div>
                            <div className="input"><span>医院:</span> <input type="text" value={upFrom.boy} onChange={(e) => this.matter1(e.target.value, "boy")} /></div>
                            <div className="input"><span>ID:&emsp;</span> <input type="text" value={upFrom.id} onChange={(e) => this.matter1(e.target.value, "id")} /></div>
                            {/* 修改 */}
                            <button className="append" onClick={() => this.amend(upFrom)}>修改</button>
                            <button className="cancel" onClick={() => this.cancel()}>取消</button>
                        </div>
                    </div> : <></>
                }
            </div >
        )
    }
}

